<template>
  <el-table :data="data.categoryList" style="width: 100%">
    <el-table-column prop="_id" label="Id" width="250" align="center" />

    <el-table-column prop="name" label="物品名称" width="180" align="center" />
    <el-table-column  prop="img" label="图片预览" width="120" align="center">
      <template #default="scope">
        <img :src="scope.row.img" alt="" style="width: 3rem">
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="编辑" width="120" align="center">
      <template #default="scope">
        <el-button
            link
            type="primary"
            size="small"
            @click="delet(scope.row)"
            align="center"
        >删除</el-button
        >
        <el-button
            link
            type="primary"
            size="small"
            align="center"
            @click="change(scope.row)"
        >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import {onBeforeMount, reactive} from "vue";
import { getHeros,deletHeros } from "@/api/getHeros";
import { useRouter} from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter()



let data = reactive({
  categoryList: [],
});
//获取分页列表函数
const getItemList = async () => {
  let result = await getHeros();
  data.categoryList = result.data

};

//删除分类
const delet = async (msg:any) => {
  let result = await deletHeros(msg._id)
  if (result.status === 200) {
    ElMessage({
      type:'success',
      message:'删除成功'
    })
    //重新获取列表数据
    await  getItemList()
  } else {
    ElMessage({
      type:'warning',
      message:'删除失败'
    })
    await  getItemList()
  }
};

//编辑分类
const change = (msg:any) => {

  router.push({
    name:'editHeros',
    params:{
      id:msg._id
    }
  })
};

onBeforeMount(async () => {
  await getItemList();
});

</script>

<style lang="less" scoped></style>
